<template>
  <div class="myheader2">
    <div class="topline">
      <div class="maincontent">
        <div class="logined">
          <span class="welcome">欢迎您，{{this.$store.state.user.user.userName}}<a href="/user/" class="user"></a>&nbsp;余额：￥{{this.$store.state.user.user.money}}<span class="money"></span>元&nbsp;积分：{{this.$store.state.user.user.points}} <span class="point"></span>分</span>
          <span class="fr">
            <a rel="nofollow" href="/user/">我的账户</a>
            |
            <a href="/user/deposit">充值</a>
            |
            <a href="/user/withdraw">提款</a>
            |
            [<a class="logout" id="logout" href="#" v-on:click="logout()">退出</a>]
          </span>
        </div>
      </div>
    </div>
    <div class="flex-line maincontent">
      <a href="/" class="logo"><img alt="" :src="logoUrl"></a>
    </div>
  </div>
</template>

<script>

export default {
  name: 'my-header2',
  data () {
    return {
      logoUrl: '../../static/images/logo.jpg'
    }
  },
  methods: {
    //退出
    logout: function(){
      this.$store.commit('logout');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.topline{height: 35px;background: #f5f5f5;line-height: 35px;color: #717171;}
/*.topline .logined{overflow: hidden;display: none;}*/

.topline .welcome{float: left;color: #717171;}
.topline .welcome .money, .topline .welcome .point {font-weight: bold;color: red;padding: 0 3px;}
.flex-line{}
.flex-line .logo{width: 180px;float: left;}
.flex-line .logo img{width: 100%;}
.flex-line .ady{width:200px;float: left;}
.flex-line .kf{width:120px;float: right;}
.flex-line .kf img{width:100%;}
.maincontent{width: 1000px;margin: 0 auto;overflow: hidden;}
</style>
